<template>
	<view class="app">
		<view class="waterfall-flow">
			<scroll-view class="scrollbox" 
				scroll-y="true" 
				enable-back-to-top
				enable-flex="true"
				@scrolltolower="handleLower">
				<!-- class="item" 必须有, 限制好 item 宽度  -->
				<view class="item" v-if="item.type=='want'" :style="item.style" v-for="(item, index) in dataList" :key="index" :data-index="index">
					<!-- 盒子样式，自定义 -->
					<view class="box">
						<view class="pic" @tap="handleFind(index, 'comments')">
							<image class="image" mode="widthFix" :src="'https://dcdn.cxycoder.com/'+item.images[0]" style="width: 100%; display: block;" ></image>
						</view>
						<view class="content"><text class="contenttext">{{item.content}}</text></view>
						<view class="user">
							<view class="userleft">
								<image style="width: 40upx; height: 40upx; border-radius: 50%; margin-right: 10upx;"
									:src="'https://dcdn.cxycoder.com/'+item.shop.avatar"></image>
								<view class="username"><text class="usernametext">{{item.shop.shopname}}</text></view>
							</view>
							<view class="right" @tap.stop="handleLike(index)">
								<text class="icon text-sm" :class="[item.isLike === 1 ? 'text-orange' : 'text-gray']">&#xe60c;</text>
								<text class="text-sm" :class="[item.isLike === 1 ? 'text-orange' : 'text-gray']">{{item.likes}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	// 瀑布流组件
	// import WaterfallFlow from '@/components/nairenk-waterfall-flow/nairenk-waterfall-flow.vue';
	// 模拟 JSON 数据
	const data = [
		
	];
	export default {
		components: {
			// WaterfallFlow
		},
		watch: {
			dataList: function (newVal, oldVal) {
				if (newVal != oldVal) {
					// #ifndef MP-WEIXIN
					this.newList = this.dataList;
					// #endif
					// #ifdef MP-WEIXIN
					this.newList = this.newList.concat(newVal)
					// #endif
					let mark = oldVal.length;
					let len = this.dataList.length;
					let screenWidth = uni.getSystemInfoSync().screenWidth;
					let style = '';
					this.$nextTick(async function () {
						const query = uni.createSelectorQuery().in(this);
						let dataArray = [];
						await new Promise((resolve, reject)=>{
							setTimeout(() => {
								query.selectAll('.waterfall-flow .item').fields({size: true}, data => {
									dataArray = data;
									resolve()
								}).exec();
							}, 520) // 针对图片 mode="widthFix" 尺寸改变时的延迟
						})
						for (let i = mark; i < len; i++) {
							if (i < 2) {
								style = `top: 0; left: ${(screenWidth/2) * i}px;`
								this.boxHeight.push(dataArray[i].height)
							} else {
								let minHeight = this.boxHeight[0];
								if (minHeight > this.boxHeight[1]) {
									minHeight = this.boxHeight[1];
									this.boxHeight[1] = minHeight + dataArray[i].height;
									style = `top: ${minHeight}px; left: ${(screenWidth/2)}px;`
								} else {
									this.boxHeight[0] = minHeight + dataArray[i].height;
									style = `top: ${minHeight}px; left: 0;`
								}
							}
							this.$set(this.newList[i], 'style', style);
							this.$forceUpdate();
						}
					})
				}
			}
		},
		data() {
			return {
				page: 1,
				start: 0,
				end: 0,
				list: [], // 列表
				newList: [], // 兼容小程序
				boxHeight: [],
				dataList: [], //数据
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '我是有底线的'
				}
			}
		},
		mounted() {
			this.getList();
		},
		onReachBottom() {
			this.page++;
			this.getList();
		},
		methods: {
			handleUpper() {
				console.log('upper');
				this.getList('upper');
			},
			handleLower() {
				console.log('lower');
				this.getList('lower');
			},
			handleLive(id){
				if(this.$store.state.user.isLogin){
					uni.navigateTo({
						url: `/pages/apps/find/details/live?id=${id}`
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}
			},
			handleFind(index, comments = null){
				var data = this.dataList[index];
				if (data.type == 'live') {
					this.handleLive(data.live_id);
				}else if(data.type == 'video'){
					uni.navigateTo({
						url: `/pages/apps/find/details/video?id=${data.id}`
					})
				}else{
					if(comments){
						uni.navigateTo({
							url: `/pages/apps/find/details/details?id=${data.id}&afferent=comments`
						})
					}else{
						uni.navigateTo({
							url: `/pages/apps/find/details/details?id=${data.id}`
						})
					}
				}
			},
			// 喜欢 & 取消喜欢
			async handleLike(index) {
				if (this.$store.state.user.isLogin) {
					let data = this.dataList[index];
					// 加载网络
					uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: data.id,
							type: 'likes'
						},
						success: res => {
							if(res.data.data === 0){
								this.dataList[index].likes -= 1;
							}else{
								this.dataList[index].likes += 1;
							}
							this.dataList[index].isLike = res.data.data;
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/auth/auth'
					})
				}
				
			},
			// 模拟加载数据
			async getList(type) {
				this.status = 'loading';
				// 判断上拉还是下拉
				if(type === 'upper'){
					this.current_page = 1;
				}else if(type === 'lower'){
					if (this.current_page >= this.last_page) {
						this.status = 'noMore';
						return false;
					} else {
						this.current_page += 1;
					}
				}
				// 加载网络
				await uni.request({
					url: '/wanlshop/find/find/getList',
					data: {
						type: 'find',
						page: this.current_page
					},
					success: res => {
						if(type === 'lower'){
							this.dataList = this.dataList.concat(res.data.data);
						}else{
							this.dataList = res.data.data;
						}
						this.current_page = res.data.current_page;  //当前页码
						this.last_page = res.data.last_page;  //总页码
						// 判断是否还有数据
						if(res.data.current_page === res.data.last_page || res.data.total === 0){
							this.status = 'noMore';
						}else{
							this.status = 'more';
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.app{
		padding-top: 190rpx;
	}
	.scrollbox{
		position: relative;
		height: 100vh;
		padding-bottom: 200rpx;
	}
	image {
		display: block;
		will-change: transform;
		border-radius: 8rpx;
	}
	.waterfall-flow {
		position: relative;
		background-color: #F4F4F4;
	}
	/* 为了初始化，还为定位上，加上这个 */
	.item {
		width: 375rpx;
		position: absolute;
		top: -375rpx;
		left: -375rpx;
	}
	.box {
		margin: 10rpx;
		/* box-shadow: 0 0 8rpx #ccc; */
		overflow: hidden;
	}
	.user {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		padding: 10rpx;
		.left,.right{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.left{
			.name{
				width: 200rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		
	}
	.content {
		font-size: 32rpx;
		padding: 20rpx 10rpx 0 10rpx;
		color: #333;
		flex-direction: row;
	}
</style>
